/**
 * @authors tanqichao
 * @date    2017-03-21 13:59:27
 * @module  广告详情
 */

import { Row, Col, Spin, Tabs, Button, Input, Modal } from 'antd';
import { AccessControl } from '../../../utils/common';
import { browserHistory } from 'dva/router';
import React, {Component} from 'react';
import Styles from './index.less';
import {Link} from 'dva/router';
import { connect } from 'dva';


const TabPane = Tabs.TabPane;
const confirm = Modal.confirm;

class AdDetail extends Component {
  constructor(props) {
    super(props)
  }

  // 投放平台
  setPlatform = () => {
    let   temp = '';
    const {detail} = this.props,
          platform = detail.platform;

    if (platform === 1) {
      temp = '全部'
    } else if (platform === 2) {
      temp = '安卓'
    } else if (platform === 3) {
      temp = 'IOS'
    } else {
      //
    }
    return temp
  }

  // 投放区域
  setRegions = () => {
    const {detail} = this.props,
          regionCodes = detail.regionCodes;
    if (regionCodes.includes(10) && regionCodes.includes(999)) {
      return '全部地域';
    }
    return '部分地域';
  }

  // 行业标签
  setIndustry = () => {
    const {detail, industry} = this.props,
          industryIds = detail.industryIds;
    let   temp = [];
    industryIds.map((item) => {
      industry.map((items) => {
        if (items.children && items.children.length) {
          items.children.map((child) => {
            if (child.code === item) {
              temp.push(child.name)
            }
          })
        }
      })
    })
    return temp.join("、");
  }

  // 创意包展示
  renderPacket = () => {
    const content = [];
    const { creativeGroupVOs } = this.props.detail;
    creativeGroupVOs.map((item) => {
      content.push(
        <li key={item.id}>
          <div className={Styles.showPacket}>
            <p>{item.title}</p>
            <p className={Styles.packetId}>创意包ID：{item.id}</p>
          </div>
          <img src={item.imgUrls[0]} />
        </li>
      )
    })
    return content;
  }

  // 复制广告
  copy = (id) => {
    this.props.dispatch({
      type: 'adDetail/copy',
      payload: JSON.stringify({id: id})
    })
  }

  // 广告删除
  delAd = () => {
    const { detail } = this.props;
    const _this = this;
    confirm({
      title: '确认删除该广告计划',
      onOk() {
        _this.props.dispatch({
          type: 'adDetail/delAd',
          payload: JSON.stringify({id: detail.id})
        })
      },
      onCancel() {
      }
    });
  }

  setTimePeriod = () => {
    const {detail} = this.props,
          periodList = detail.periodList;
    let temp = [];
    let content = [];
    if (periodList && periodList.length === 0) return '全天候展示广告'
    periodList.map((item, index) => {
      let time = item.split('')
      let obj = []
      time.map((list, i) => {
        if (list === '1') {
          obj.push(i+':00')
        }
      })
      temp.push(obj)
    })

    const filter = (index) => {
      let temp = ''

      switch (index) {
        case 0:
          temp = '星期一：'
          break
        case 1:
          temp = '星期二：'
          break
        case 2:
          temp = '星期三：'
          break
        case 3:
          temp = '星期四：'
          break
        case 4:
          temp = '星期五：'
          break
        case 5:
          temp = '星期六：'
          break
        case 6:
          temp = '星期日：'
          break
      }
      return temp
    }

    temp.map((item, index) => {
      let wrap = []
      if (item.length > 0) {
        item.map((list, i) => {
          wrap.push(<span key={i}>{list}</span>)
        })
        content.push(<li key={index}><span>{filter(index)}</span><span>{wrap}</span></li>)
      }
    })

    return content
  }

  // 投放人群
  setCrowd = () => {
    const { detail } = this.props
    const mediaCodesName = detail.mediaCodesName
    const mediaCodes = detail.mediaCodes
    if (mediaCodes && mediaCodes.length === 0) return '不限'
    return mediaCodesName && mediaCodesName.join('，')
  }

  setScene = () => {
    const {detail} = this.props;
    const sceneCodesName = detail.sceneCodesName;
    const sceneCodes = detail.sceneCodes;
    if (sceneCodes && sceneCodes.length === 0) return '不限'
    return sceneCodesName && sceneCodesName.join('，')
  }

  setMedia = () => {
    const {detail, mediaList} = this.props,
          mediaCodes = detail.mediaCodes;
    if (mediaCodes && mediaCodes.length === 0) return '不限'
    let   temp = [];
    mediaList && mediaList.map((item) => {
      mediaCodes.map((items) => {
        if (item.code === items) {
          temp.push(item.name)
        }
      })
    })

    return temp.join("、");
  }


  createDom = () => {
    const { detail } = this.props;
    const permissionList = this.props.permissions;

    return (
      <div className={Styles.adDetail}>

        <div className={Styles.title}><em className={Styles.one}></em>广告信息：</div>
        <Row>
          <Col span={3}>推广计划：</Col>
          <Col span={20}>{detail.name}</Col>
        </Row>
        <Row>
          <Col span={3}>计费方式：</Col>
          <Col span={20}>CPC</Col>
        </Row>
        <Row>
          <Col span={3}>广告出价：</Col>
          <Col span={20}>{detail.fee}</Col>
        </Row>
        <Row>
          <Col span={3}>每日预算：</Col>
          <Col span={20}>{detail.dayBudget}</Col>
        </Row>
        <Row>
          <Col span={3}>投放平台：</Col>
          <Col span={20}>{this.setPlatform()}</Col>
        </Row>
        <Row>
          <Col span={3}>投放日期：</Col>
          <Col span={20}>{detail.beginTime} - {detail.endTime}</Col>
        </Row>
        {
          // <Row>
          //   <Col span={3}>投放时段：</Col>
          //   <Col span={20}>
          //     <ul className={Styles.timePeriod}>{this.setTimePeriod()}</ul>
          //   </Col>
          // </Row>
        }
        <Row>
          <Col span={3}>投放地域：</Col>
          <Col span={20}>{this.setRegions()}</Col>
        </Row>
        <Row>
          <Col span={3}>投放人群：</Col>
          <Col span={20}>
            <div className={Styles.crowd}>{this.setCrowd()}</div>
          </Col>
        </Row>
        <Row>
          <Col span={3}>投放媒体：</Col>
          <Col span={20}>{this.setMedia()}</Col>
        </Row>
        <Row>
          <Col span={3}>投放场景：</Col>
          <Col span={20}>
            <div className={Styles.crowd}>{this.setScene()}</div>
          </Col>
        </Row>
        <Row>
          <Col span={3}>投放广告位：</Col>
          <Col span={20}>{detail.appPids.length > 0 ? detail.appPids.join('，') : '不限'}</Col>
        </Row>
        <Row>
          <Col span={3}>标签：</Col>
          <Col span={20} className={Styles.industryLabel}>
            {this.setIndustry()}
          </Col>
        </Row>
        <Row>
          <Col span={3}>广告类型：</Col>
          <Col span={20}>
            {
              detail.type === 2 ? '传统广告' : '互动广告'
            }
          </Col>
        </Row>
        <Row>
          <Col span={3}>创意包：</Col>
          <Col span={20}>
            <ul className={Styles.packetList}>{this.renderPacket()}</ul>
          </Col>
        </Row>
        {
          AccessControl(permissionList, 'dsp_ad_modify') ?
            <Row>
              <Col span={24} className={Styles.handleBtn}>
                <Button size="large" type="primary" className={Styles.mr10}>
                  <Link to={`/page/ad/edit/${detail.id}`}>编辑</Link>
                </Button>
                <Button type="primary" size="large" onClick={this.copy.bind(this, detail.id)} className={Styles.mr10}>复制并创建模板</Button>
                <Button ghost type="danger" size="large" onClick={this.delAd}>删除</Button>
              </Col>
            </Row> : null
        }
      </div>
    )
  }

  render () {
    return (
      <div>
        {
          (this.props.detail && this.props.industry) ? this.createDom() : <Spin size="large" tip="数据加载中..." />
        }
      </div>
    )
  }
}

export default connect((state) => {
  const { detail, industry, mediaList, crowdList } = state.adDetail;
  const { permissions } = state.indexPage;
  return {
    detail,
    industry,
    mediaList,
    crowdList,
    permissions
  }
})(AdDetail)
